<template>
	<view class="box bg-f7">
		<view class="img-box z-0">
			<image :src="imgSrc" mode="widthFix"></image>
		</view>
		<view class="bg-f7 z-1 list-box padding-l-r-30">
			<view v-for="(item,index) in list" :key="index" class="bg-white border-radio-14 padding-20 flex-box margin-b-20"  @click="goDetails(item)">
				<view class="img-box goods-img border-radio-8">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="flex-column flex-1">
					<view class="only-1 color-0 fs-30 fw-b margin-b-10">
						{{item.title}}
					</view>
					<view class="color-9 fs-24">
						销量{{item.sales}}
					</view>
					<view class="flex-1"></view>
					<view class="color-0 fs-24 align-items-center">
						￥<text class="fw-b fs-34">{{item.price}}</text>
						<view class="flex-1"></view>
						<view class="car-img"  @click.stop="joinCart(item)">
							<image src="/static/image/home/home-car.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
    getShopList, joinCart,config
} from '@/api/home.js'
	export default{
		data(){
			return {
				imgSrc:'https://wx4.sinaimg.cn/mw690/006b965Ugy1i0jx99macuj60m80m8drj02.jpg',
				list:[ ],
                page:'1',
                isMore:true
			}
		},
        onLoad() {
            this.init()
            this.getConfig()
        },
        //上拉加载函数
        onReachBottom() {
            if (this.isMore) {
                setTimeout(() => {
                    this.getList()
                }, 100)
            } else {
                uni.showToast({
                    title: '暂无更多',
                    icon: 'none'
                })
            }

        },
        onPullDownRefresh() {
            //刷新初始化数据
            this.init()
            //关闭刷新动画
            setTimeout(function() {
                uni.stopPullDownRefresh()
            }, 1000)
        },
        methods: {
            init(){
                this.list=[]
                this.page = 1
                this.getList()
            },
            getList(){
                getShopList().then(res=>{
                    if (res.code ==1){
                        this.list= this.list.concat(res.data)
                        if (res.data && res.data.length > 9) {
                            this.isMore = true
                            this.page++
                        } else {
                            this.isMore = false
                        }
                    }else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        })
                    }
                })
            },
            // 加入购物车
            joinCart(item){
                joinCart({
                    goods_id:item.id,
                    count:1
                }).then(res=>{
                    if (res.code == 1){
                        uni.showToast({
                            title: '加入购物车成功',
                            icon: 'none'
                        });
                    }else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                })
            },
            // 详情页
            goDetails(item){
                uni.navigateTo({
                    url:'/pageA/shop/details?id='+item.id
                })
            },
            getConfig(){
                config().then(res=>{
                    if (res.code == 1){
                        res.data.forEach(item=>{
							if (item.name =='tese_banner'){
                                this.imgSrc = item.value
                            }
						})
                    }
                })
            }
        },
	}
</script>

<style lang="scss" scoped>
	.list-box {
		padding-top: 20rpx;
		margin-top: -30rpx;
		border-radius: 30rpx ;
		.img-box {
			width: 160rpx;
			height: 160rpx;
			min-width: 160rpx;
			margin-right: 24rpx;
		}
		.goods-img {
			image {
				width: 160rpx;
				height: 160rpx;
			}
		}
		.car-img {
			width: 60rpx;
			image {
				width: 100%;
			}
		}
	}
</style>